<template>
  <div :class="{main:true,'main-unfold':unfold}">
    <div class="menu">
      <Select
        v-model="submitData.language"
        @on-change="selectChange"
        size="small"
        style="width:20%;"
        filterable
      >
        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
      <Button type="primary" size="small" @click="execute" :loading="loading">执行</Button>
    </div>
    <codemirror v-model="submitData.text" :options="cmOption"></codemirror>
    <br>
    <h3 class="title">执行信息</h3>
    <div class="state">
      <Row class="content">
        <Col span="12">
          <b>运行结果:</b>
          <Tag :color="resultColor">{{resultCode[contentData.result]}}</Tag>
        </Col>
        <Col span="12">
          <b>通过率:</b>
          <span>{{contentData.pass_rate}}%</span>
        </Col>
      </Row>
      <Row class="content">
        <Col span="12">
          <b>耗费时间:</b>
          <span>{{contentData.time}}ms</span>
        </Col>
        <Col span="12">
          <b>占用内存:</b>
          <span>{{contentData.memory}}MB</span>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
import { codemirror } from "vue-codemirror";
import "codemirror/lib/codemirror.css";
// language
import "codemirror/mode/javascript/javascript.js";
// theme css
import "codemirror/theme/monokai.css";
// require active-line.js
import "codemirror/addon/selection/active-line.js";
// styleSelectedText
import "codemirror/addon/selection/mark-selection.js";
import "codemirror/addon/search/searchcursor.js";
// hint
import "codemirror/addon/hint/show-hint.js";
import "codemirror/addon/hint/show-hint.css";
import "codemirror/addon/hint/javascript-hint.js";
import "codemirror/addon/selection/active-line.js";
// highlightSelectionMatches
import "codemirror/addon/scroll/annotatescrollbar.js";
import "codemirror/addon/search/matchesonscrollbar.js";
import "codemirror/addon/search/searchcursor.js";
import "codemirror/addon/search/match-highlighter.js";
// keyMap
import "codemirror/mode/clike/clike.js";
import "codemirror/addon/edit/matchbrackets.js";
import "codemirror/addon/comment/comment.js";
import "codemirror/addon/dialog/dialog.js";
import "codemirror/addon/dialog/dialog.css";
import "codemirror/addon/search/searchcursor.js";
import "codemirror/addon/search/search.js";
import "codemirror/keymap/sublime.js";
// foldGutter
import "codemirror/addon/fold/foldgutter.css";
import "codemirror/addon/fold/brace-fold.js";
import "codemirror/addon/fold/comment-fold.js";
import "codemirror/addon/fold/foldcode.js";
import "codemirror/addon/fold/foldgutter.js";
import "codemirror/addon/fold/indent-fold.js";
import "codemirror/addon/fold/markdown-fold.js";
import "codemirror/addon/fold/xml-fold.js";

import { PROCEDURE_LANG, RESULT_CODE } from "@/config";
import { Post, Get } from "@/api";
import { sleep } from "@/libs/tools";

export default {
  data() {
    return {
      loading: false,
      unfold: false,
      resultCode: RESULT_CODE, //结果码
      contentData: {
        solution_id: 0, //运行id
        problem_id: 0, // 题目id
        user_id: 0, // 提交的用户id
        time: 0, //用时(毫秒)
        memory: 0, // 占用内存
        in_date: 0, // 添加时间
        result: 0, // 判题结果
        language: 0, // 使用的语言
        ip: 0, //用户的ip,
        contest_id: 0, //所属的竞赛组id
        valid: 0, //是否有效
        num: 0, //竞赛中的序号
        code_length: 0, //代码长度
        judgetime: 0, //判题时间
        pass_rate: 0 //通过率
      },
      submitData: {
        problem_id: 0,
        text: "// 请粘贴你的代码到这里",
        ip: "192.168.0.1",
        language: PROCEDURE_LANG[0].value,
        contest_id: 0,
        num: 0
      },
      cityList: PROCEDURE_LANG,
      cmOption: {
        tabSize: 4,
        styleActiveLine: false,
        lineNumbers: true,
        styleSelectedText: false,
        lineWrapping: true,
        line: true,
        foldGutter: true,
        focus: true,
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
        highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true },
        mode: PROCEDURE_LANG[0].mode,
        // hint.js options
        hintOptions: {
          // 当匹配只有一项的时候是否自动补全
          completeSingle: false
        },
        //快捷键 可提供三种模式 sublime、emacs、vim
        keyMap: "sublime",
        matchBrackets: true,
        showCursorWhenSelecting: true,
        theme: "monokai",
        extraKeys: { Ctrl: "autocomplete" }
      }
    };
  },
  props: {
    problemId: {
      type: Number,
      default: 0
    },
    contestId: {
      type: Number,
      default: 0
    },
    num: {
      type: Number,
      default: 0
    }
  },
  computed: {
    resultColor() {
      switch (this.contentData.result) {
        case 0:
          return "warning";
        case 1:
          return "warning";
        case 2:
          return "warning";
        case 3:
          return "warning";
        case 4:
          return "success";
        default:
          return "error";
      }
    }
  },
  methods: {
    selectChange(e) {
      const current = this.cityList.filter(item => item.value == e);
      this.cmOption.mode = current[0].mode;
    },
    async execute() {
      //执行按钮
      this.unfold = false;
      this.loading = true;
      this.submitData.problem_id = this.problemId;
      this.submitData.contest_id = this.contestId;
      this.submitData.num = this.num;
      let res = await Post.submitCode(this.submitData);
      this.contentData = res.data;
      while (this.contentData.result === 0) {
        await sleep(1000);
        res = await Get.getSolutionList(res.data);
        this.contentData = res.data[0];
      }
      if (res.statusCode === 0) {
        this.$Message.warning(res.message);
      }
      this.unfold = true;
      this.loading = false;
    }
  },
  components: {
    codemirror
  },
  async mounted() {
    setTimeout(() => {
      (this.styleSelectedText = true), (this.cmOption.styleActiveLine = true);
    }, 100);
  },
  async created() {
    let res = await Get.getProblemStatus({
      acrive: this.contestId !== 0 ? "contest":"problem",
      problem_id: this.problemId,
      contest_id: this.contestId,
      num: this.num
    });
    console.log(res);
    
    if (res.statusCode == 0) {
      this.$Message.warning(res.message);
      return;
    }

    if (res.data.length && res.data[0].status != 0) {
      this.unfold = true;
      this.contentData.result = res.data[0].status;
      this.submitData.text = res.data[0].text;
      return;
    }
  }
};
</script>

<style lang="less" scoped>
.main {
  height: 335px;
  overflow: hidden;
  transition: 0.36s all;
  &-unfold {
    height: 460px;
  }
}
.menu {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
.state {
  background: #383838;
  color: #fff;
  padding: 10px;
  margin: 10px 0;
  border-radius: 2px;
}
.CodeMirror-focused .cm-matchhighlight {
  background-image: url();
  background-position: bottom;
  background-repeat: repeat-x;
}
.cm-matchhighlight {
  background-color: lightgreen;
}
.CodeMirror-selection-highlight-scrollbar {
  background-color: green;
}
</style>